<template>
  <view class="container">
    <view class="wheel" @click="spinWheel" :style="{ transform: `rotate(${wheelDegree}deg)` }">
      <view v-for="(prize, index) in prizes" :key="index" class="segment" :style="{ backgroundColor: getSegmentColor(index), transform: `rotate(${segmentRotation(index)})`}">
<!--        <image :src="prize.pic" class="prize-image"></image> -->
        <text>{{ resultMessage }}</text>
<!--        <text>{{ prize.probability * 100 }}%</text>-->
      </view>
    </view>
    <view class="result" v-if="showResult">
      <image :src="resultPrize.pic" class="result-image"></image>
      <text>{{resultMessage}}</text>
      <button @click="resetResult">重新抽奖</button>
    </view>
  </view>
</template>

<script>
import { prizeWheel, searchPrizeList } from "@/api/prize";

export default {
  data() {
    return {
      prizes: [], // 奖品列表
      showResult: false, // 是否显示结果
      resultMessage: '', // 结果信息
      resultPrize: null, // 中奖奖品
      wheelDegree: 0, // 轮盘旋转角度
      animationFrame: null, // 动画帧ID
    };
  },
  methods: {
    async fetchPrizes() {
      searchPrizeList().then(res => {
        this.prizes = res.data.rows;
      });
    },
    async spinWheel() {
      if (this.showResult) {
        this.resetResult();
      }

      // 停止之前的动画
      if (this.animationFrame) {
        cancelAnimationFrame(this.animationFrame);
      }

      // 开始抽奖动画
      let startAngle = Math.floor(Math.random() * 360);
      let endAngle = 0;
      let spinTime = 3000; // 旋转时间，单位毫秒
      let startTime = Date.now();

      const spin = () => {
        let currentTime = Date.now();
        let elapsedTime = currentTime - startTime;
        let progress = elapsedTime / spinTime;

        // 计算当前角度
        endAngle = startAngle + (172000 * progress);

        // 更新轮盘角度
        this.wheelDegree = endAngle % 172000;

        // 检查是否完成旋转
        if (progress < 1) {
          this.animationFrame = requestAnimationFrame(spin);
        } else {
          // 停止动画
          cancelAnimationFrame(this.animationFrame);
          this.animationFrame = null;

          // 调用抽奖API
          this.drawPrize();
        }
      };

      // 开始动画
      spin();
    },
    async drawPrize() {
      try {
        const response = await prizeWheel();
        if (response.code === 200) {
          const prizeIndex = Math.floor((this.wheelDegree % 360) / (360 / this.prizes.length));
          this.resultPrize = this.prizes[prizeIndex];
          this.resultMessage = `恭喜你抽中了：${this.resultPrize.description}`;
          this.showResult = true;
        } else {
          this.resultMessage = '抽奖失败，请稍后再试';
          this.showResult = true;
        }
      } catch (error) {
        this.resultMessage = '网络错误，请检查网络连接';
        this.showResult = true;
      }
    },
    resetResult() {
      this.showResult = false;
      this.resultMessage = '';
      this.resultPrize = null;
      this.wheelDegree = 0;
      if (this.animationFrame) {
        cancelAnimationFrame(this.animationFrame);
        this.animationFrame = null;
      }
    },
    getSegmentColor(index) {
      const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1','#3357F5','#FF5739'];
      return colors[index % colors.length];
    },
    segmentRotation(index) {
      return -((360 / this.prizes.length) * index);
    },
  },
  mounted() {
    this.fetchPrizes();
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.wheel {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 5px solid #ccc;
  overflow: hidden;
  position: relative;
  transition: transform 0.5s ease-in-out;
  cursor: pointer;
}

.segment {
  position: absolute;
  width: 50%;
  height: 50%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prize-image {
  width: 50%;
  height: 50%;
  object-fit: cover;
  border-radius: 20%;
}

.result {
  margin-top: 20px;
  text-align: center;
}

.result-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

</style>
